<template>
  <div class="hello">
    <h1>{{ counter.count }}</h1>
    <h2 :style="{color:userINFO.color}">{{ userINFO.title }}</h2>
    <h3>{{ userINFO.age }}</h3>
    <button @click="add(1)">num+1</button>
    <button @click="addPlus(2)">num+2</button>
    <button @click="setTitles('小井(延迟五秒更改内容)','orange')">setTitle</button>
    <button @click="setAge(18.5)">setAge</button>
  </div>
</template>

<script setup>
import {useCounterStore, useUserINFOStore} from '@/store'

const counter = useCounterStore();
const userINFO = useUserINFOStore();
const add = (num) => {
  counter.$patch({
    counter: counter.count += num
  })
}
const addPlus = (num) => {
  counter.plusAsync(num)
}

//这个就是封装过的方法，就不需要上面写的那么复杂
const setTitles = (title, color) => {
  userINFO.setTitle(title, color)
}
const setAge = (age) =>{
  userINFO.setAge(age)
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
